<template>
	<view class="share" :class="!cancelShow?'noBg':''">
		<view class="down" :class="!cancelShow?'no_down':''">
			<view class="up">
				<text class="center" v-if="cancelShow">分享到</text>
				<view class="flex">
					<!-- <button open-type="share" class="share_btn">
						<view class="item" >
							<view class="share_img wx">
								<image src="../../static/wx.png" role="img" mode="widthFix"></image>
							</view>
							<text>微信</text>
						</view>
					</button> -->
					<view class="item" @click="save(shareText,shareImg,shareVideo,shareId)">
						<view class="share_img pengyouquan">
							<image src="/static/pengyouquan.png" role="img" mode="widthFix"></image>
						</view>
						<text>朋友圈</text>
					</view>
					<view class="item" @click="save(shareText,shareImg,shareVideo,shareId)">
						<view class="share_img">
							<image src="/static/imager.png" role="img" mode="widthFix"></image>
						</view>
						<text>保存图片</text>
					</view>
				</view>
			</view>
			<text class="cancel" @click="cancel()" v-if="cancelShow">取消</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"share",
		props: {
			shareText: {
				type: String,
				default: ''
			},
			shareImg: {
				type: Array,
				default: []
			},
			shareVideo: {
				type: String,
				default: ''
			},
			shareId: {
				type: String,
				default: ''
			},
			cancelShow: {
				type: Boolean,
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		onShareAppMessage(res) {
		    return {
		      title: '素材分享',
		      path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
		    }
		  },
		methods:{
			share(){
				this.$emit('ShareAppMessage');
			},
			save(shareText,shareImg,shareVideo,shareId){
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return;
				}
				var that = this;
				// 判断上次是否取消了授权
				uni.getSetting({
					success (res) {
						if(!res.authSetting['scope.writePhotosAlbum']){//如果没有授权相册
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success: () => {
								    // 授权成功时的操作
									that.saveText(shareText,shareImg,shareVideo);
								},
								fail: (err) => {//如果第一次点击了取消授权，第二次点击无法弹出授权框，走fail回调
								    // 授权失败时的操作
									uni.showModal({//要写一个confirm函数，否则不能触发uni.openSetting函数
										//提示
										title: '提示',
										content: '请授权，否则无法保存图片！',
										showCancel:true,
										cancelText:'取消',
										confirmText:'去授权',
										success: (res)=>{
											if(res.confirm){
												uni.openSetting({//第二次之后，授权框弹不出来，需要跑到设置，手动打开授权开关
													success(settingdata){
														if(settingdata.authSetting['scope.writePhotoAlbum']){
															this.$api.msg('授权成功');
														}else{
															this.$api.msg('并未授权，无法保存到相册');
														}
													}
												})
											}
										}
									});
								}
							})
						}else{
							that.saveText(shareText,shareImg,shareVideo,shareId);
						}
					}
				})
			},
			// 保存内容
			saveText(shareText,shareImg,shareVideo,shareId){
				var that = this;
				uni.setClipboardData({
				  data: shareText,
				  success: function() {
					uni.showToast({
						title:'文案已复制',
					})
					// console.log(shareImg);return;
					if(shareImg.length>0){
						uni.showLoading({
							title: '图片生成中'
						})
						that.$axios('Index/getWxcode','POST','sale',{
							id: shareId
						}).then(res=>{
							uni.hideLoading();
							if(res.data.code == 200){
								res.data.data.list.forEach((item,idx)=>{
									uni.downloadFile({
										url: item,
										success: res => {
											that.saveImg(res.tempFilePath);
										},
										fail: err => {
											that.$api.msg('保存失败');
										}
									});
								})
							}
						})
					}
					if(shareVideo){
						uni.downloadFile({
							url: shareVideo,
							success: res => {
								that.saveVideo(res.tempFilePath);
							},
							fail: err => {
								that.$api.msg('保存失败');
							}
						});
					}
				  }
				})
			},
			saveImg(url){
				uni.saveImageToPhotosAlbum({
				  filePath: url,
				  success: () => {
					uni.showToast({
						title:'已保存到相册',
					})
				  },
				  fail: () => {
					this.$api.msg('保存失败');
				  }
				});
			},
			saveVideo(url){
				uni.saveVideoToPhotosAlbum({
				  filePath: url,
				  success: () => {
					uni.showToast({
						title:'已保存到相册',
					})
				  },
				  fail: () => {
					this.$api.msg('保存失败');
				  }
				});
			},
			cancel(){
				this.$emit('cancelShare', false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		text-align: center;
		color: #666;
		
		.down{
			background: #fff;
			height: 400rpx;
			width: 100%;
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			.up{
				padding: 0 40rpx;
				width: 100%;
				border-bottom: 1rpx solid #999;
				.center{
					font-size: 36rpx;
				}
				.flex{
					display: flex;
					justify-content: space-around;
					margin: 30rpx 0;
					.share_btn{
						padding: 0;
						    margin: 0;
						    background: none;
							line-height: 1;
							&::after{
								border: none;
							}
					}
					.item{
						width: 120rpx;
						font-size: 26rpx;
						.share_img{
							margin: 0 auto;
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
							background: $bg-color;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-bottom: 10rpx;
							image{
								width: 70%;
							}
						}
						.pengyouquan,.wx{
							background: none;
							image{
								width: 100%;
							}
						}
					}
				}
			}
			.cancel{
				font-size: 34rpx;
				line-height: 100rpx;
				// border-top: 1rpx solid #666;
			}
		}
		.no_down{
			height: 180rpx;
			padding: 0;
			border-top: 1rpx solid #d4cdcd;
			border-radius: 0;
			.up{
				.flex{
					margin: 30rpx auto;
					.item{
						width: 110rpx;
						.share_img{
							width: 80rpx;
							height: 80rpx;
						}
					}
				}
			}
		}
	}
	.noBg{
		background: transparent;
		height: 180rpx;
	}
</style>